<template>
    <div>
        <router-link
            to="/couponSearch"
            class="search"
        >
            <div>
                <div>输入搜索关键词</div>
                <img src="../../asset/icon/icon_coupon_search.png">
            </div>
        </router-link>
        <div class="swiper-container">
            <yd-slider
                autoplay="3000"
                style="height: 180px;"
            >
                <yd-slider-item
                    v-for="(item, index) in swiperSource"
                    :key="index"
                >
                    <a :href="item.link_url">

                        <img
                            class="swiperImg"
                            :src="item.images"
                        >
                    </a>
                </yd-slider-item>
            </yd-slider>
        </div>
        <div class="classify">
            <router-link
                :to="{path:'/couponList',query:{type: 'classify',id: item.id,}}"
                v-for="(item, index) in classifySource"
                :key="index"
            >
                <img :src="item.img">
                <p>{{item.cate_name}}</p>
            </router-link>
        </div>
        <div class="title">
            <div>
                热门推荐
            </div>
            <router-link :to="{path:'/couponList',query:{type: 'hot'}}">查看更多 ></router-link>
        </div>
        <div class="hotGoods">
            <router-link
                :to="{path:'/couponCont',query:{coupon_id: item.id}}"
                v-for="(item, index) in hotGoodsSource"
                :key="index"
            >
                <img :src="item.images">
                <div>
                    <p style="-webkit-box-orient: vertical;">{{item.title}}</p>
                    <div>
                        <div>
                            <p>￥{{item.fee}}</p>
                            <p>￥{{item.o_price}}</p>
                        </div>
                        <div :class="item.vip_level == 2?'hotMoney':'hotShop'">
                            {{item.return_money_msg}}
                        </div>
                    </div>
                </div>
            </router-link>
        </div>
        <div class="thing">
            <div>
                <div>
                    <img src="../../asset/icon/coupon_thing_icon.png">
                    <span>好物推荐</span>
                </div>
                <router-link :to="{path:'/couponList',query:{type: 'goods'}}">查看更多 ></router-link>
            </div>
        </div>
        <div class="thing-cont">
            <router-link
                :to="{path:'/couponCont',query:{coupon_id: item.id}}"
                v-for="(item, index) in GoodsSource"
                :key="index"
            >
                <img :src="item.images">
                <div>
                    <p style="-webkit-box-orient: vertical;">{{item.title}}</p>
                    <div>
                        <div>
                            <p>￥{{item.fee}}</p>
                            <p>￥{{item.o_price}}</p>
                        </div>
                        <div :class="item.vip_level == 2?'hotMoney':'hotShop'">
                            {{item.return_money_msg}}
                        </div>
                    </div>
                </div>
            </router-link>
        </div>
        <div class="title">
            <div>
                附近推荐
            </div>
            <router-link :to="{path:'/couponList',query:{type: 'address'}}">查看更多 ></router-link>
        </div>
        <div class="cont">
            <router-link
                :to="{path:'/couponCont',query:{coupon_id: item.id}}"
                v-for="(item, index) in listSource"
                :key="index"
                class="list"
                :style=" index === 0 ? 'margin-top:0px' : '' "
            >
                <div>
                    <img :src="item.images">
                </div>
                <div>
                    <p style="text-overflow: -o-ellipsis-lastline;">{{item.title}}</p>
                    <div>
                        <div>
                            <span>￥{{item.fee}}</span>
                            <span>
                                <span>￥</span>
                                <span>{{item.o_price}}</span>
                            </span>
                        </div>
                        <div :class="item.vip_level == 2?'hotMoney':'hotShop'">
                            {{item.return_money_msg}}
                        </div>
                    </div>
                </div>
            </router-link>
        </div>
        <div style="height:50px;"></div>
        <Footer :idx="0" />
    </div>
</template>
<script>
import wxGetAddress from '../../config/wxGetAddress.js';
import goodsShare from '../../config/goodsShare.js';
import Footer from '../../component/Footer'
export default {
    name: "coupon",
    data() {
        return {
            page: 1,
            limit: 10,
            wrapperHeight: 0, //屏幕高度 - 脚部
            listSource: [],
            swiperSource: [],
            classifySource: [],//分类
            hotGoodsSource: [],//热门推荐商品
            GoodsSource: [], //好物推荐

        };
    },
    mounted() {
    },
    methods: {
        getSwiperData() {
            let params = {};
            this.$post("/index/get_banner", params)
                .then(res => {
                    if (res.code === 20000) {
                        this.swiperSource = res.data

                    }
                })
                .catch(err => { });
        },
        getClassify() {
            let params = {};
            this.$post("/coupon/get_cate_list", params)
                .then(res => {
                    if (res.code === 20000) {
                        this.classifySource = res.data.list
                    }
                })
                .catch(err => { });
        },

        /**
         * 热门
         */
        getHotGoods() {
            let params = {};
            this.$post("/coupon/get_recommend_list", params)
                .then(res => {
                    if (res.code === 20000) {
                        this.hotGoodsSource = res.data.list
                    }
                })
                .catch(err => { });
        },
        /**
         * 好物
         */
        getGoods() {
            let params = {};
            this.$post("/coupon/get_best_goods_list", params)
                .then(res => {
                    if (res.code === 20000) {
                        this.GoodsSource = res.data.list
                    }
                })
                .catch(err => { });
        },
        getCouponConfig() {
            this.$post("/index/wx_share", {})
                .then(res => {
                    if (res.code == 20000) {
                        res.data.url = 'http://wangzhuan.3todo.cn/?type=wx';
                        this.couponConfigSource = res.data
                        this.getShareConfig()
                    }
                })
        },
        getShareConfig() {
            let params = {
                url: 'http://wangzhuan.3todo.cn/',
            };
            this.$post("/index/share", params)
                .then(res => {
                    if (res.code === 20000) {
                        goodsShare(res.data, this.couponConfigSource, this.couponShareSuccess)
                        wxGetAddress(res.data, this.wxGetAddressSuccess)
                    }
                })

        },
        wxGetAddressSuccess(lat, lon) {
            let params = {
                lat: lat,
                lng: lon,
                page: 1,
                limit: 200
            };
            this.$post("/coupon/get_list", params)
                .then(res => {
                    if (res.code === 20000) {
                        this.listSource = res.data.list;
                    }
                })
                .catch(err => { });
        }
    },
    beforeCreate() {
        document.querySelector("body").setAttribute("style", "background-color:#f0effe");
    },
    created() {
        if (this.$route.query.shareType == 'coupon') {
            this.$router.replace({
                path: '/couponCont',
                query: {
                    coupon_id: this.$route.query.couponId,
                    shareType: 'coupon'
                }
            })
            return;
        }
        if (!!localStorage.getItem("coupon_id")) {
            let id = localStorage.getItem("coupon_id")
            localStorage.removeItem('coupon_id');
            this.$router.push({ path: '/couponCont', query: { coupon_id: id } })
        }
        this.getSwiperData()
        this.getClassify()
        this.getHotGoods()
        this.getGoods()
        this.getCouponConfig()
    },
    components: {
        'Footer': Footer,
    },
};
</script>
<style lang="less" scoped>
@import url("../../asset/css/coupon");
</style>